import { ForwardedRef, ReactNode } from 'react'

// material-ui
import { SxProps, useTheme } from '@mui/material/styles'
import { CardProps } from '@mui/material'

// ==============================|| CUSTOM SUB CARD ||============================== //

interface Props extends CardProps {
  children: ReactNode
  hasContent: boolean
  contentClass: string
  darkTitle: boolean
  secondary: ReactNode | string
  sx: SxProps
  contentSX: SxProps
  stitle: ReactNode | string
}

const SubCard = forwardRef(
  (
    {
      children,
      hasContent = true,
      contentClass,
      darkTitle,
      secondary,
      sx = {},
      contentSX = {},
      stitle,
      ...others
    }: Partial<Props>,
    ref: ForwardedRef<HTMLDivElement>
  ) => {
    const theme = useTheme()

    return (
      <Card
        ref={ref}
        sx={{
          border: '1px solid',
          borderColor: theme.palette.primary.light,
          ':hover': {
            boxShadow: '0 2px 14px 0 rgb(32 40 45 / 8%)'
          },
          ...sx
        }}
        {...others}
      >
        {/* card header and action */}
        {!darkTitle && stitle && (
          <CardHeader sx={{ p: 2.5 }} stitle={<Typography variant="h5">{stitle}</Typography>} action={secondary} />
        )}
        {darkTitle && stitle && (
          <CardHeader sx={{ p: 2.5 }} stitle={<Typography variant="h4">{stitle}</Typography>} action={secondary} />
        )}

        {/* hasContent & header divider */}
        {stitle && (
          <Divider
            sx={{
              opacity: 1,
              borderColor: theme.palette.primary.light
            }}
          />
        )}

        {/* card hasContent */}
        {hasContent && (
          <CardContent sx={{ p: 2.5, ...contentSX }} className={contentClass || ''}>
            {children}
          </CardContent>
        )}
        {!hasContent && children}
      </Card>
    )
  }
)

export default SubCard
